<template>
  <!-- 大赛日程安排 -->
  <div class="container">
    <div class="container_area">
      <div class="container_row">
        <div class="row_1">
          <div class="row_1_text row_1_text_before">
            <div class="text_thumb">
              <a href="" class="custom-btn">
                <img src="../../../assets/images/challenge-1.png" alt="" />
              </a>
            </div>
            <div class="text_content">
              <h3>大赛日程安排</h3>
              <div class="about_btn">
                <a href="" class="custom_btn"> 立即了解 </a>
                <el-icon color="#9999c5"><Right /></el-icon>
              </div>
            </div>
          </div>
        </div>
        <div class="row_1">
          <div class="row_1_text row_1_text_before">
            <div class="text_thumb">
              <a href="" class="custom-btn">
                <img src="../../../assets/images/challenge-2.png" alt="" />
              </a>
            </div>
            <div class="text_content">
              <h3>团队与报名</h3>
              <div class="about_btn">
                <a href="" class="custom_btn"> 立即了解 </a>
                <el-icon color="#9999c5"><Right /></el-icon>
              </div>
            </div>
          </div>
        </div>
        <div class="row_1">
          <div class="row_1_text">
            <div class="text_thumb">
              <a href="" class="custom-btn">
                <img src="../../../assets/images/challenge-3.png" alt="" />
              </a>
            </div>
            <div class="text_content">
              <h3>参赛条件与设备</h3>
              <div class="about_btn">
                <a href="" class="custom_btn"> 立即了解 </a>
                <el-icon color="#9999c5"><Right /></el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script  setup>
</script>


<style lang="scss" scoped>
.el-icon {
  vertical-align: middle;
}
.container {
  max-width: 1170px;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
//   大赛日程安排
.container_area {
  margin-top: 130px;
  background-color: #202066;
  border-radius: 10px;
  padding: 120px 100px;
  margin-bottom: -200px;
  position: relative;
  z-index: 9;
  .container_row {
    margin-bottom: -30px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    .row_1 {
      margin-bottom: 30px;
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
      .row_1_text {
        position: relative;
        padding: 0 30px;
        text-align: center;

        .text_thumb {
          a {
            img {
              max-width: 100%;
              height: auto;
            }
          }
        }
        .text_content {
          margin-top: 30px;
          margin-bottom: 30px;
          color: #fff;
          h3 {
            margin-top: 30px;
            margin-bottom: 30px;
          }
          .about_btn {
            text-align: center !important;
            .custom_btn {
              color: #9999c5;
              font-size: 16px;
            }
            img {
              padding-left: 10px;
              font-weight: 900;
              vertical-align: middle;
            }
          }
        }
      }
      .row_1_text_before {
        &::before {
          position: absolute;
          content: "";
          top: 0;
          right: 0;
          width: 2px;
          height: 100%;
          background-color: #4d4d85;
        }
      }
    }
  }
}
</style>